<template>
  <view>
    <u-navbar :border-bottom="false" :is-back="false" title="" :background="{backgroundColor: 'rgba(0,0,0,0)'}">
      <view class="navbars u-f-ac u-f-jsb">
        <view class="u-f1">
          <u-icon @click="$u.route({type: 'back', delta: 1})" name="arrow-left" size="34" color="#fff"></u-icon>
        </view>
        <view class="u-f-ajc">
          <image src="/static/images/header.png" mode="widthFix"></image>
        </view>
        <view class="u-f1" style="text-align: right;">
          <!-- <u-button type="error" size="mini" :custom-style="customStyle" @click="showPopup=true">汇购预排</u-button> -->
        </view>
      </view>
    </u-navbar>

    <view class="num_box f-w-700 u-f-ajc u-f-column">
      <view>现金充值</view>
    </view>

    <view class="message-container">
      <view class="tabs-view2 u-f-ac u-f-jsb">
        <!-- <u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="changeTabs" active-color="#FD5B00"
          bar-width="80"></u-tabs> -->
        <view class="tabs_item u-f-ajc" :class="type == 0 ? 'tabs_active' : ''" @click="changeType(0)">充值</view>
        <view class="tabs_item u-f-ajc" :class="type == 1 ? 'tabs_active' : ''" @click="changeType(1)">转账</view>
      </view>

      <view v-if="type==0" class="wrappper">
        <money-recharge></money-recharge>
      </view>
      <view v-if="type==1" class="wrappper">
        <transfer-recharge></transfer-recharge>
      </view>
    </view>



    <!-- <view class="payway-wrapper">
			<view class="payway-list" @click="uRecharge()">
				<view class="wrapper">
					<view>
						<image src="../../../static/wanke/tangchao.png" mode=""></image>
					</view>
					<view>U充值</view>
				</view>
				<view class="right">
					<uni-icons type="arrowright" size="40" color="#D0B074"></uni-icons>
				</view>
			</view>
			<view class="payway-list" @click="transferRecharge()">
				<view class="wrapper">
					<view>
						<image src="../../../static/wanke/tangchao.png" mode=""></image>
					</view>
					<view>转账</view>
				</view>
				<view class="right">
					<uni-icons type="arrowright" size="40" color="#D0B074"></uni-icons>
				</view>
			</view>
			<view class="payway-list" @click="moneyRecharge()">
				<view class="wrapper">
					<view>
						<image src="../../../static/wanke/tangchao.png" mode=""></image>
					</view>
					<view>充值</view>
				</view>
				<view class="right">
					<uni-icons type="arrowright" size="40" color="#D0B074"></uni-icons>
				</view>
			</view>
		</view> -->
    <!-- <view class="pay-btn" @click="submitPayType()">去充值</view> -->
    <!-- <view class="zhifu">
			<view class="zhif_fs">
				<image src="../../../static/zhifu/3.jpg" mode=""></image>
			</view>
			<view class="zhifu_sm">
				微信支付（截图保存）
			</view>
		</view>
		<view class="zhifu">
			<view class="zhif_fs">
				<image src="../../../static/zhifu/4.jpg" mode=""></image>
			</view>
			<view class="zhifu_sm1">
				支付宝支付（截图保存）
			</view>
		</view> -->
    <!-- <button class="sub_btn"  @click="submit" >下一步</button> -->
  </view>
</template>

<script>
  import {
    isWeixin,
    GetQueryString,
    setSessionStorage
  } from "@/utils/wx";
  import uniIcons from '@/components/uni-icons/uni-icons.vue'
  import transferRecharge from './transferRecharge'
  import moneyRecharge from './moneyRecharge'
  export default {
    data() {
      return {
        checkpay: '',
        type: 0,
        openId: '',
      }
    },
    components: {
      uniIcons,
      transferRecharge,
      moneyRecharge
    },
    methods: {
      // async getShareSign() {
      // 	// //判断是否是微信浏览器
      // 	    //获取微信opened
      // 		var ua = window.navigator.userAgent.toLowerCase();
      // 		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      // 			var url = window.location.href;
      // 	      let code = GetQueryString('code');
      // 		     console.log(code)
      // 	      if (code) {
      // 			  let res = this.$api.loginByWechatByCode({
      // 			  	code: code,
      // 			  	type: 2
      // 			  }).then((res) => {
      // 			  	console.log(res)
      // 			  	if (res.state == "1") {
      // 			  	console.log(res.obj)
      // 			  	 if (res.obj.state == '2') {
      // 			  	this.openId=res.obj.openId;
      // 				setSessionStorage('jbt_openId', this.openId);
      // 			  	  console.log(res.obj.openId)
      // 			  	  } else {
      // 			  	    alert("获取openID失败");
      // 			  	    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf1ae178d6a97bfe8&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
      // 			  	  }
      // 			  	}
      // 			  })
      // }
      // else{
      // 	window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf1ae178d6a97bfe8&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;

      // }
      // }},
      // 切换
      changeType(type) {
        this.type = type
      },
      changePayType(type) {
        this.checkpay = type
      },
      uRecharge() {
        //u充值
        uni.redirectTo({
          url: '/pages/mine/Recharge/uRecharge'
        })
      },
      transferRecharge() {
        //转账
        uni.redirectTo({
          url: '/pages/mine/Recharge/transferRecharge'
        })
      },
      moneyRecharge() {
        //充值

        uni.redirectTo({
          url: '/pages/mine/Recharge/moneyRecharge'
        })
      }
      //  submitPayType() {
      // 	if(this.checkpay==''){
      // 		uni.showToast({
      // 			title:'请选择充值方式',
      // 			icon:'none'
      // 		})
      // 		return
      // 	}
      // 	if(this.checkpay==1){
      // 		//u充值
      // 		uni.redirectTo({
      // 		   url: '/pages/mine/Recharge/uRecharge'
      // 		})
      // 	}
      // 	if(this.checkpay==2){
      // 		//u充值
      // 		uni.redirectTo({
      // 		   url: '/pages/mine/Recharge/transferRecharge'
      // 		})
      // 	}
      // 	if(this.checkpay==3){
      // 		//充值
      // 		uni.redirectTo({
      // 		   url: '/pages/mine/Recharge/moneyRecharge'
      // 		})
      // 	}
      // }
    },
    onLoad(options) {
      console.log(this.statusBar)
      // //#ifdef H5
      // this.getShareSign();
      // //#endif
      uni.setNavigationBarTitle({
        title: options.title
      })
    }
  }
</script>

<style lang="scss">
  //    .payway-wrapper{
  // 	margin-top: 30rpx;
  // 	background: #FFFFFF;
  //    .payway-list {
  // 	   display: flex;
  // 	   justify-content: space-between;
  // 	   align-items: center;
  // 	   padding: 20rpx;
  // 	   height: 300rpx;
  // 	   border-bottom: 1rpx solid #E4E7ED;

  // 	   .wrapper{
  // 		    display: flex;
  // 			align-items: center;
  // 			color: $app-Gold-color;
  // 			font-weight: bold;
  // 			view{
  // 				font-size: 50rpx;
  // 				image{
  // 					width: 200rpx;
  // 					height: 200rpx;
  // 					border-radius: 50%;
  // 					margin-right: 20rpx;
  // 				}
  // 			}
  // 	   }
  //    }	
  // }
  // .pay-btn{
  // 	width: 100%;
  // 	height: 50px;
  // 	line-height: 50px;
  // 	font-size: 40rpx;
  // 	background: $app-background;
  // 	color: $app-Gold-color;
  // 	text-align: center;
  // 	position: fixed;
  // 	bottom: 0;
  // }
  .title-wrapper {
    // margin-top: 2rpx;
    // position: fixed;
    // z-index: 999;
    /* #ifdef H5 */
    // top: 44px;
    /* #endif */
    /* #ifdef APP-PLUS */
    // top:0;
    /* #endif */
    display: flex;
    justify-content: space-between;
    // align-items: center;
    width: 100%;
    height: 80rpx;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 36rpx;
    // background: #857777;
    background: #931c1e;

    // margin-bottom: 44px;
    // box-shadow: 0px 4px 13px 0px rgba(176, 153, 108, 0.47);
    // font-family: 36rpx;
    view {
      width: 50%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-family: PingFang SC;
      font-weight: 400;
      // color: #E5E5E5;
      // border-right: 1rpx solid #FFFFFF;
    }

    .active {
      font-weight: bold;
      background: #ae2223;
      // color: #FFFFFF;
      // background: #FFFFFF;
    }
  }

  .wrappper {
    // margin-top: 200rpx;
  }
</style>

<style lang="scss">
  page {
    width: 100%;
    background: url(/static/images/bg.png) no-repeat 0 0;
    background-size: cover;
  }

  .num_box {
    padding: 30rpx 0 60rpx;
    color: #FFDDAE;

    >view:nth-of-type(1) {
      font-size: 60rpx;
    }
  }

  .message-container {
    width: 100%;
    min-height: 1300rpx;
    background-color: #F4F5F7;
    border-radius: 40rpx 40rpx 0 0;
    padding: 50rpx 30rpx 0;
  }

  .tabs-view2 {
    width: 100%;
    border-radius: 50rpx;
    overflow: hidden;
    border: 2px solid #FF1634;
    margin-bottom: 50rpx;

    .tabs_item {
      width: 50%;
      height: 68rpx;
      color: #FF1634;
      background-color: #fff;
      box-sizing: border-box;
    }

    .tabs_active {
      background-color: #FF1634;
      color: #fff;
    }
  }
</style>